<script setup>
import { useRouter } from 'vue-router';
import { usePayStore } from '@/stores/payStore'
import { useUserStore } from '@/stores/userStore';
import { useOrderStore } from '@/stores/orderStore';
import { province } from '@/assets/map.js'
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useCountDown } from '@/utils/useCountDown';
import { createOrderAPI } from '@/apis/order';
import router from '@/router';
const { formatTime, start } = useCountDown()
const userInfo = useUserStore().userInfo;
const route = useRouter();


const details = ref({
    state: 0,
    tolPrice: 0,
    discount: 0,
    payment: 0,
    time: null,
    goodList: []
})
onMounted(() => {
    details.value = usePayStore().details
    if (details.value == null) {
        ElMessage('信息出错')
        route.replace({ path: '/home' })
    }
})
//修改地址表单
// 地区列表

const areaList = ref({
    province: province,
    city: null,
    region: null
})
// 地区选择
const areaSelected = ref({
    province: null,
    city: null,
    region: null,
    full: null
})
const dialog = ref(0)
const proccess = ref(0)
onMounted(() => {
    if (details.value.state == 1) {
        proccess.value = 1;
        const time = new Date(details.value.time);

        const curTime = new Date();
        start(3600 - (curTime - time) / 1000)
    }
    else if (details.value.state != 0) {
        proccess.value = 2;
    }

})
const createOrder = async () => {
    if (userInfo.data.address == null || userInfo.data.telephone == null || userInfo.data.address.length == 0 || userInfo.data.telephone.length == 0) {
        ElMessage({ type: 'info', message: "请先补充收货信息" })
        return;
    }
    try {
        const res = await createOrderAPI(details.value.goodList, userInfo.data)
        if (res.code == 0) {
            ElMessage({ type: 'info', message: '商品存货不足,订单生成失败,请重新下单' })
            return
        }
        await usePayStore().getOrderDetails(res.data);
        details.value = usePayStore().details;
        const time = new Date(details.value.time);
        const curTime = new Date();
        start((curTime - time) / 1000)
        proccess.value = 1
    } catch (e) {
        console.log(e);
    }
}
const modifyInfo = () => {
    if (checkInfo() == false) return
    let res = "";
    res = res.concat("", areaSelected.value.province);
    res = res.concat("", areaSelected.value.city);
    res = res.concat("", areaSelected.value.region);
    res = res.concat("", areaSelected.value.full);
    userInfo.data.address = res;
    ElMessageBox.confirm("是否要将该收货信息保存为个人信息?", "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
        }
    ).then(() => {
        const uid = userInfo.data.uid
        useUserStore().updateUserAddress(uid, res);
        useUserStore().updateUserTelephone(uid, userInfo.data.telephone);
    })
    dialog.value = 0
}
const checkInfo = () => {

    if (userInfo.data.uname == null || userInfo.data.uname.length == 0) {
        ElMessage({ type: 'info', message: "请输入用户名" })
        return false;
    }
    if (userInfo.data.telephone.length != 11) {
        ElMessage({ type: 'info', message: "请输入11位电话号码" })
        return false;
    }
    if (areaSelected.value.full == null || areaSelected.value.full.length == 0) {
        ElMessage({ type: 'info', message: "请输入完整地址" })
        return false;
    }
    return true;
}
const rules = {
    uname: [
        { required: true, message: '收货人不能为空', trigger: 'blur' },
        { min: 1, max: 10, message: '收货人名称过长(超过10个字符)', trigger: 'blur' }
    ],
    address: [
        { required: true, message: '收货地址不能为空', trigger: 'blur' },
    ],
    telephone: [
        { required: true, message: '电话号码不能为空', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入正确的电话号码格式', trigger: 'blur' }
    ]
}
const doPay = async () => {
    await usePayStore().paySuccessful();
    proccess.value = 2;
}
</script>
<template>
    <el-container>
        <el-header
            style="text-align: center; bcart-top-right-radius: 5px;bcart-top-left-radius: 5px; background-color: black;padding: 0px;height: 50px;color:#cdcdcd;">
            <el-link v-if="usePayStore().lastPage == 0" :underline="false" style="position:fixed;top:20px;left: 20px;"
                @click="route.replace({ path: '/home' })">&lt;首页</el-link>
            <el-link v-else-if="usePayStore().lastPage == 1" :underline="false" style="position:fixed;top:20px;left: 20px;"
                @click="route.replace({ path: '/cart' })">&lt;我的购物车</el-link>
            <el-link v-else :underline="false" style="position:fixed;top:20px;left: 20px;"
                @click="route.replace({ path: '/order' })">&lt;我的订单</el-link>

            <p style="display: inline-block;margin-block-start: 11px;margin-block-end: 0;">
                {{ proccess == 0 ? "请核对订单信息" : proccess == 1 ? "请选择支付方式" : "支付成功" }}
            </p>
        </el-header>

        <el-main v-if="proccess == 0">

            <!-- 收货信息 -->
            <div style="width: 1150px;margin:0 auto; box-shadow: 0 5px 5px 5px #cdcdcd;color:#666666;">
                <div style="margin: 10px;display: flex; align-items: center;;">
                    <el-descriptions title="收货信息" :column="2" style="width: 700px;">
                        <el-descriptions-item label="收货人：">{{ userInfo.data.uname }}</el-descriptions-item>
                        <el-descriptions-item label="联系方式：">{{ userInfo.data.telephone }}</el-descriptions-item>
                        <el-descriptions-item label="收货地址：">{{ userInfo.data.address }}</el-descriptions-item>
                    </el-descriptions>
                    <el-button @click="dialog = 1">修改收货信息</el-button>
                    <el-dialog v-model="dialog">
                        <el-form label-width="100px" ref="formRef" :rules="rules" :model="userInfo.data">
                            <el-form-item prop="uname" label="收货人:">
                                <el-input v-model="userInfo.data.uname"></el-input>
                            </el-form-item>
                            <el-form-item prop="telephone" label="联系电话:">
                                <el-input v-model="userInfo.data.telephone"></el-input>
                            </el-form-item>


                            <el-form-item prop="address" label="收货地址:">
                                <el-select v-model="areaSelected.province" placeholder="请选择省份市区">
                                    <el-option v-for="it in areaList.province" :value="it.name"
                                        @click="areaList.city = it.children"></el-option>
                                </el-select>

                                <!-- 选择市 -->

                                <el-select v-model="areaSelected.city"
                                    :disabled="areaSelected.province == null || areaSelected.province.length == 0"
                                    placeholder="请选择市区">
                                    <el-option v-for="it in areaList.city" :value="it.name"
                                        @click="areaList.region = it.children"></el-option>
                                </el-select>

                                <!-- 选择县区 -->

                                <el-select v-model="areaSelected.region"
                                    :disabled="areaSelected.city == null || areaSelected.city.length == 0"
                                    placeholder="请选择县区">
                                    <el-option v-for="it in areaList.region" :value="it.name"></el-option>
                                </el-select>

                                <!-- 填写详细地址 -->
                                <el-input style="width: 200px;margin:20px;" v-model="areaSelected.full"
                                    :disabled="areaSelected.region == null || areaSelected.region.length == 0"
                                    placeholder="请补充详细地址"></el-input>
                            </el-form-item>

                            <el-form-item label="">
                                <el-button type="primary" @click="modifyInfo();">确定修改</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>
            </div>

            <!-- 商品信息 -->
            <div style="width:1150px;margin:10px auto;box-shadow: 0 0 5px 5px #cdcdcd;color:#666666;">
                <div style="margin: 10px;display: flex; align-items: center;;">
                    <el-descriptions title="商品信息" style="width: 700px;">
                        <el-descriptions-item>
                            <el-table :data="details.goodList">

                                <el-table-column type="index" width="50px" align="center" />
                                <!-- 商品信息 -->
                                <el-table-column label="商品信息" width="350px" align="center">
                                    <template #default="scope">
                                        <div style="display: flex;align-items: center; width: 320px;">
                                            <el-image :src="scope.row.good.src"
                                                style="width:100px;height: 100px;"></el-image>
                                            <p style="margin-left:10px ;text-align: left;color:#666666;font-size: 16px;;">{{
                                                scope.row.good.gname }}
                                            </p>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="单价" width="200px" align="center">
                                    <template #default="scope">
                                        <p style="text-align: center;">￥{{ scope.row.good.price }}</p>
                                    </template>
                                </el-table-column>
                                <!-- 数量 -->
                                <el-table-column label="数量" width="180px" align="center">
                                    <template #default="scope">
                                        <p style="text-align: center;">x{{ scope.row.count }}</p>
                                    </template>
                                </el-table-column>
                                <!-- 总价 -->
                                <el-table-column label="总价" width="180px" align="center">
                                    <template #default="scope">
                                        <p style="text-align: center;color:brown">￥{{ scope.row.tolPrice }}
                                        </p>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>

            <!-- 金额明细 -->
            <div style="width:1150px;margin:10px auto;box-shadow: 0 0 5px 5px #cdcdcd;color:#666666;">
                <div style="margin: 10px;display: flex; align-items: center;;">
                    <el-descriptions title="金额明细" :column="2" style="width: 700px;">
                        <el-descriptions-item label="商品件数：">
                            {{ details.goodList.length }}件
                        </el-descriptions-item>

                        <el-descriptions-item label="商品总价：">
                            ￥{{ details.tolPrice }}
                        </el-descriptions-item>

                        <el-descriptions-item label="优惠减免：">
                            ￥{{ details.discount }}
                        </el-descriptions-item>

                        <el-descriptions-item label="应付总额：">
                            <p style="font-size: 20px;display: inline-block;color:brown">
                                ￥{{ details.payment }}
                            </p>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
            <div style="width:1150px;margin:10px auto;">
                <div style="margin: 10px;display: flex; align-items: center;justify-content: flex-end;">
                    <el-button type="primary" style="box-shadow: 5px 5px 5px 0px #cdcdcd;"
                        @click="createOrder(); ">提交订单</el-button>
                </div>
            </div>
        </el-main>

        <el-main v-else-if="proccess == 1">
            <div style="width:600px;margin:10px auto;box-shadow: 0 5px 5px 5px #cdcdcd;color:#666666;">
                <div style="margin: 10px;display: flex; align-items: center;;">
                    <el-descriptions title="" :column="1" style="width: 700px;">
                        <el-descriptions-item>
                            <p>订单提交成功！请尽快完成支付。</p>
                            <p>支付还剩 <span>{{ formatTime }}</span>, 超时后将取消订单</p>

                        </el-descriptions-item>
                        <el-descriptions-item label="应付总额：">
                            <p style="font-size: 20px;display: inline-block;color:brown">
                                ￥{{ details.tolPrice }}
                            </p>
                        </el-descriptions-item>
                        <el-descriptions-item style="width:600px;">
                            <div style="display: flex;justify-content: space-evenly;height: 300px;align-items: center;">
                                <el-button @click="doPay">微信支付</el-button>
                                <el-button @click="doPay">支付宝付款</el-button>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>

        </el-main>

        <el-main v-else>
            <div style="width:600px;margin:10px auto;box-shadow: 0 5px 5px 5px #cdcdcd;color:#666666;">
                <div style="margin: 10px;text-align: center;align-items: center;">
                    <el-icon style="color: #1dc779;">
                        <SuccessFilled />
                    </el-icon>
                    <h1 style="color: #1dc779;; display: inline-block;">支付成功</h1>
                </div>
            </div>
        </el-main>
    </el-container>
</template>
<style scoped>
p {
    margin-block-start: 0;
    margin-block-end: 0;
}
</style>